import React, { useEffect, useState } from 'react';
import {
    FileOutlined,
    PieChartOutlined,
    AntDesignOutlined
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { getRole } from '../../utils/utils';

const ROLE = getRole()

const { Content, Footer, Sider } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    ROLE === '1' ? getItem('数据大盘', '1', <PieChartOutlined />) : null,
    getItem('商品管理', '2', <FileOutlined />),
];

const WorkSpace: React.FC = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const navigate = useNavigate()
    const location = useLocation()

    //处理导航栏跳转
    const selectChangeHandle = (key: string) => {
        if (key === '1') {
            navigate('DataEcharts')
        } else if (key === '2') {
            navigate('GoodsList')
        }
    }

    // useEffect(() => {
    //     const token = sessionStorage.getItem('token')
    //     if(!token) {
    //         navigate('/')
    //     }
    // }, [])

    useEffect(() => {
        if(location.pathname === '/WorkSpace') {
            navigate('/WorkSpace/GoodsList')
        }
    }, [])

    return (
        <>
            <Layout style={{ minHeight: '100vh' }}>
                <Sider theme={'light'} collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                    <div style={{ marginLeft: 10, height: 50, width: '80%', borderBottom: '1px solid black' }}>
                        <AntDesignOutlined style={{ fontSize: 30, color: '#08c' }} />
                        <span style={{ lineHeight: '50px', marginLeft: 10, fontSize: 20 }}>Ant Design</span>
                    </div>
                    <Menu defaultSelectedKeys={['1']} mode="inline" items={items} onSelect={({ key }) => { selectChangeHandle(key) }} />
                </Sider>
                <Layout>
                    <Content style={{ margin: '0 16px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }} items={[
                            { title: ROLE === '1' ? '管理员' : '客服小二' },
                        ]}>
                        </Breadcrumb>
                        <div
                            style={{
                                padding: 24,
                                minHeight: 360,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                            }}
                        >
                            <Outlet></Outlet>
                        </div>
                    </Content>
                    <Footer style={{ textAlign: 'center' }}>
                        Ant Design ©{new Date().getFullYear()} Created by Ant UED
                    </Footer>
                </Layout>
            </Layout>
        </>
    );
};

export default WorkSpace;